import { MoneyCollectOutlined, SearchOutlined } from '@ant-design/icons';
import { useMutation } from '@tanstack/react-query';
import { AutoComplete, Button, Card, Col, message, Modal, Row, Space, Spin, Typography } from 'antd';
import { indexOf, map, split, trim, upperCase } from 'lodash';
import { memo, useState } from 'react';
import MonacoEditor from 'react-monaco-editor';
import { v4 } from 'uuid';
import { getData } from './api';
import EastMoney from './components/east-money';
import { reptile_modal_style, reptile_style } from './style';

const { Paragraph } = Typography;

const autoCompleteOptions = [
  { label: '百度', value: 'https://www.baidu.com/' },
  { label: '谷歌', value: 'https://www.google.com/' },
  { label: 'MeetSocial', value: 'https://www.meetsocial.com/' },
  { label: 'BeyondClick', value: 'https://www.beyondclick.com/' },
  { label: 'ICenter', value: 'https://icenterpro.meetsocial.com/' },
];
const editorOptions = {
  selectOnLineNumbers: true,
  readonly: true
};

const Reptile = () => {
  const [value, setValue] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const { data, isPending, mutate } = useMutation({
    mutationFn: getData
  });

  const handleSearch = () => {
    if (value) {
      mutate(value);
      return;
    }
    message.destroy();
    message.warning('请输入网址');
  };

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <Spin spinning={isPending}>
      <Row gutter={[16, 16]} className={reptile_style}>
        <Col span={24}>
          <Space>
            <AutoComplete
              className='input'
              allowClear
              value={value}
              options={autoCompleteOptions}
              placeholder='请输入网址'
              filterOption={(inputValue, option) => indexOf(upperCase(option!.value), upperCase(inputValue)) !== -1}
              onChange={setValue}
            />
            <Button type='primary' icon={<SearchOutlined />} onClick={handleSearch}>爬取数据</Button>
            <Button type='primary' icon={<MoneyCollectOutlined />} onClick={showModal} danger>东方财经</Button>
          </Space>
        </Col>
        <Col span={12}>
          <MonacoEditor
            width='100%'
            height='600'
            language='html'
            theme='vs-dark'
            value={trim(data?.result?.html)}
            options={editorOptions}
          />
        </Col>
        <Col span={12}>
          <Card>
            <Typography className='text'>
              {
                map(
                  split(trim(data?.result?.text), ' '),
                  i => (
                    <Paragraph key={v4()}>
                      {i}
                    </Paragraph>
                  )
                )
              }
            </Typography>
          </Card>
        </Col>
      </Row>
      <Modal
        className={reptile_modal_style}
        title='东方财经'
        footer={null}
        keyboard={false}
        maskClosable={false}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <EastMoney />
      </Modal>
    </Spin>
  );
};

export default memo(Reptile);